<template>
  <div class="PayDetail">
    <Header title="充值明细"></Header>
    <scroller :on-infinite="infinite">
      <div style="padding:52px 12px 0 12px;border-radius: 5px;">
        <div style="padding: 0 12px;background: #fff;">
          <div v-for="(item,index) in  list" class="PayDetaillist" @click="gointo(item)">
            <div>
              <div style="font-size: 16px" v-if="item.rechargeType==1">充值{{item.rechargeAmount}}元</div>
              <div style="font-size: 16px" v-if="item.rechargeType==2">{{item.setMealSeatType==1?'独立座':'联排座'}}{{item.setMealName}}</div>
              <div style="font-size: 14px" v-if="item.payType==1">现金支付</div>
              <div style="font-size: 14px" v-if="item.payType==2">微信支付</div>
              <div style="font-size: 14px" v-if="item.payType==3">支付宝支付</div>
            </div>
            <div>
              <div style="font-size: 16px">{{item.payAmount}}.00</div>
              <div style="font-size: 14px">{{item.payTime}}</div>
            </div>
          </div>
        </div>

      </div>
    </scroller>
  </div>
</template>

<script>
  import Header from './../Header'
  import {MoneyRecord} from '../../api/mine'

  export default {
    name: 'PayDetail',
    data () {
      return {
        list: [],
        pageNo: 0,
        pageSize: 0,
      }
    },
    created () {
      // this.getList()
    },
    methods: {
      getList () {
        MoneyRecord({
          'page-no': this.pageNo,
          'page-size': this.pageSize,
        }).then(res => {
          this.list = this.list.concat(res.data.data.resultList)
        })
      },
      infinite (done) {
        this.pageNo += 1
        this.pageSize += 10
        MoneyRecord({
          'page-no': this.pageNo,
          'page-size': this.pageSize,
        }).then(res => {
          this.list = this.list.concat(res.data.data.resultList)
          if (res.data.data.resultList.length < 10) {
            done(true)
          }
        })

      },
      gointo(item){
        this.$store.dispatch('MONEY_MES', {
          MoneyMes: item
        })
        this.$router.push({
          path: `/Mine/MoneyDetail`
        })
      }
    },
    components: {
      Header
    }
  }
</script>

<style lang="less" type="text/less">
  .PayDetail {
    font-size: 14px;
    .PayDetaillist {
      display: flex;
      padding: 12px 0px;
      border-bottom: 1px #F8FAF9 solid;
      & > div {
        flex: 1;
        & > div:last-child {
          color: #9C9C9C;
        }
      }
      & > div:last-child {
        text-align: right;
        & > div:first-child {
          color: @common-color;
        }
      }
    }
  }
</style>
